<template>
	<view class="cart-page">
		<!--  数据加载loadding  -->
		<template v-if="!isLogin || cartListArr.length == 0">
			<view class="nologin flex flex-direction justify-center align-center padding-tb text-999 fs28 bg-white"
				style="padding-bottom: 64rpx">
				<view>
					<image class="width-440 height-220" src="@/static/empty/cart.png" mode="widthFix"></image>
				</view>
				<view class="margin-top-xs text-sm text-999">您的购物车还没有商品，快去挑选吧</view>
				<view class="nologin-btn text-df margin-top text-center" @tap.stop="handleSubmit('navToLogin')"
					v-if="!isLogin">去登录</view>
				<view class="nologin-btn text-df margin-top text-center" @tap.stop="handleSubmit('navToHome')"
					v-if="isLogin && cartListArr.length == 0">
					去挑选好货
				</view>
			</view>
		</template>
		<template v-if="isLogin && cartListArr.length != 0">
			<view class="page-list">
				<block v-for="(item, index) in cartListArr" :key="index">
					<view class="bg-white flex align-center padding">
						<view class="margin-right-sm" @tap="check(item, index)">
							<text v-if="isEditor" :class="{ checked_icon: true, checked_active: item.delChecked }"
								class="fu-iconfont2">
								{{ item.delChecked ? "" : "" }}
							</text>
							<text v-else :class="{ checked_icon: true, checked_active: item.checked }"
								class="fu-iconfont2">
								{{ item.checked ? "" : "" }}
							</text>
						</view>
						<view class="goods-info flex align-center flex-sub" style="min-width: 1px">
							<view class="wrap-image fu-block-180 radius margin-right-sm" @tap="toDetail(item, index)">
								<view class="box-kong text-df text-white" v-if="item.is_valid == 1">
									<view class="box-kong-item">
										<image src="@/static/cart/sellOut.png" mode="widthFix" />
									</view>
								</view>
								<view class="box-kong text-df text-white" v-if="item.is_valid == 2">
									<view class="box-kong-item">
										<image src="@/static/cart/shelf.png" mode="widthFix" />
									</view>
								</view>
								<image class="goods_thumb" :src="item.goods_thumb" mode="aspectFill"></image>
							</view>
							<view class="goods-desc flex-sub" style="min-width: 1px">
								<view>
									<view class="text-333 text-cut fu-fs28">{{item.goods_name }}</view>
									<view class="text-sm text-999 sku_name" v-if="item.spec_item_name && item.is_open_sku == 1"
										@tap.stop="openPopup(item, index)">
										<view class="text-cut width-250">
											<text>{{ item.spec_item_name }}</text>
										</view>
										<view style="flex-shrink: 0">
											<text style="margin-right: 16rpx">选规格</text>
											<text class="cuIcon-unfold lg text-gray"></text>
										</view>
									</view>
								</view>
								<view class="desc-number flex justify-between align-center">
									<!-- <view class="text-lg text-prices">
										<text class="text-price"></text>
										<text>{{ item.shop_price }}</text>
									</view> -->
									<view class='flex flex-wrap align-center' style="transform: translateY(5rpx);">
										<text class='shoppingCartSettlement_fd2_0_c0_c0_c1_c2_c0_c0'>￥</text>
										<view class=' shoppingCartSettlement_fd2_0_c0_c0_c1_c2_c0_c1'>
											<text
												class=' shoppingCartSettlement_price1_fd2_0_c0_c0_c1_c2_c0_c1'>{{ item.shop_price | frontPrice }}</text>
											<text
												class=' shoppingCartSettlement_price2_fd2_0_c0_c0_c1_c2_c0_c1'>{{ item.shop_price | laterPrice }}</text>
										</view>
									</view>
									<view class="number">
										<uni-number-box :min="1" :max="Number(item.stock)" :value="item.num"
											@change="numberChange($event, index)"></uni-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="action-bar cu-bar bg-white flex justify-between">
				<view class="flex flex-sub align-center padding-lr justify-between"
					style="max-width: calc(100% - 230rpx)">
					<view class="flex justify-between align-center" @tap="checkAll">
						<text v-if="isEditor" :class="{ checked_icon: true, checked_active: delAllChecked }"
							class="fu-iconfont2">
							{{ delAllChecked ? "" : "" }}
						</text>
						<text v-else :class="{ checked_icon: true, checked_active: allChecked }" class="fu-iconfont2">
							{{ allChecked ? "" : "" }}
						</text>
						<text class="margin-left-sm text-df text-333">全选</text>
					</view>
					<view class="margin-left-sm text-df text-666" v-if="!isEditor">
						<view class="flex">
							<text>合计：</text>
							<!-- <text class="text-price text-prices text-lg">{{totalPrice}}</text> -->
							<view class='flex flex-wrap align-center' style="transform: translateY(5rpx);">
								<text class='shoppingCartSettlement_fd2_0_c0_c0_c1_c2_c0_c0'>￥</text>
								<view class=' shoppingCartSettlement_fd2_0_c0_c0_c1_c2_c0_c1'>
									<text
										class=' shoppingCartSettlement_price1_fd2_0_c0_c0_c1_c2_c0_c1'>{{ totalPrice | frontPrice }}</text>
									<text
										class=' shoppingCartSettlement_price2_fd2_0_c0_c0_c1_c2_c0_c1'>{{ totalPrice | laterPrice }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<button v-if="!isEditor" class="cu-btn btn-settlement bg-theme text-white lg" @click="createOrder">
					结算({{ totalNumber }})
				</button>
				<button v-if="isEditor" class="cu-btn bg-theme text-white margin-right-sm operate_btn" @click="delCart(2)">
					移入收藏
				</button>
				<button v-if="isEditor" class="cu-btn btn-gray margin-right-sm operate_btn" @click="delCart(1)">
					删除
				</button>
			</view>
		</template>
	</view>
</template>
<script>
	import {
		LOGIN_PAGE_URL
	} from "@/common/config.js";
	export default {
		name: "benben-shop-cart",
		props: {
			// 购物车列表
			cartList: {
				type: [Array, Object],
				default: () => [],
			},
			//是否编辑状态 // 管理 or 完成
			isEditor: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				setTimeoutFn: null,
				cartListArr: [], // 购物车列表
			};
		},
		computed: {
			isLogin() {
				return this.$store.state.token == "" ? false : true;
			},
			// 选择的商品总价
			totalPrice() {
				let list = this.cartListArr;
				let total = 0;
				list.forEach((item) => {
					if (item.checked == true) {
						let _price;
						_price = item.shop_price;
						total += Number(_price) * Number(item.num);
					}
				});
				return Number(total.toFixed(2));
			},
			// 选择的商品数量
			totalNumber() {
				let list = this.cartListArr;
				let total = 0;
				list.forEach((item) => {
					if (item.checked == true) {
						total += Number(item.num);
					}
				});
				return total;
			},
			// 购物车内的商品数量
			allNumber() {
				let list = this.cartListArr;
				let total = 0;
				list.forEach((item) => {
					total += Number(item.num);
				});
				return total;
			},
			// 管理模式全选状态
			delAllChecked() {
				let list = this.cartListArr;
				let bool = true;
				list.forEach((item) => {
					if(item.stock == 0) return;
					if (!item.delChecked) {
						bool = false;
					}
				});
				return bool;
			},
			// 正常模式全选状态
			allChecked() {
				let bool = true;
				this.cartListArr.map((item) => {
					if (item.stock == 0) return;
					// if (item.is_valid != 0) return;
					if (!item.checked) {
						bool = false;
					}
				});
				return bool;
			},
		},
		watch: {
			cartList: {
				handler(value) {
					let list = [];
					let checkedArr = this.cartListArr.filter((item) => item.checked);
					let delCheckedArr = this.cartListArr.filter((item) => item.delChecked);

					list = value.map((item) => {

						let obj = {
							...item,
							checked: false,
							delChecked: false,
							stock: 0
						};
						let delChecked = delCheckedArr.find((val) => val.id == item.id);
						let checked = checkedArr.find((val) => val.id == item.id);
						let goods_sku = item.goods_sku;
						// let stock = goods_sku.find((val) => val.sku_id == item.sku_id);
						// if (stock && obj) {
						// 	obj.stock = stock.stock;
						// }
						obj.stock = item.stock;
						if (delChecked) {
							obj.delChecked = true;
						}
						if (checked && obj) {
							obj.checked = true;
						}
						return obj;
					});
					this.cartListArr = list;
				},
				deep: true,
				immediate: true,
			},
			isEditor: {
				handler(value) {
					if (value) {
						this.cartListArr.forEach((item) => {
							item.delChecked = true;
						});
					}
				},
				deep: true,
				immediate: true,
			},
		},
		methods: {
			// 打开选择规格弹窗
			openPopup(item, index) {
				this.$emit("update:cart-index", index);
				this.$emit("update:cart-id", item.id);
				this.$emit("update:sku-id", item.sku_id);
				this.$emit("update:cart-num", item.num);
				this.$emit("update:goods-id", item.goods_id);

				let data = {
					spec_list: item.goods_spec,
					sku_list: item.goods_sku,
					spec_item_name: item.spec_item_name
				}
				this.$emit("changeSku", data);
			},
			toDetail(item) {
				if (item.is_valid == 2) return;
				this.$emit("update:goods-id", item.goods_id);
				this.$emit("toGoods");
			},
			// 点击去登录按钮或去首页按钮
			handleSubmit(type) {
				this.$emit(type);
			},
			// 商品选中状态处理
			check(item, i) {
				console.log(item);
				if (this.isEditor) {
					this.$set(item, "delChecked", !item.delChecked);
				} else {
					// if (item.is_valid == 2) return this.$message.info("该商品已下架");
					// if (item.is_valid == 1)
					// 	return this.$message.info("该商品已售完,正在采购中");
					if (item.stock == 0)
						return this.$message.info("该商品已售完,正在采购中");
					this.$set(item, "checked", !item.checked);
				}
			},
			//全选|取消全选
			checkAll() {
				if (this.isEditor) {
					const bool = !this.delAllChecked;
					this.cartListArr.forEach((item) => {
						item.delChecked = bool;
					});
				} else {
					const bool = !this.allChecked;
					this.cartListArr.forEach((item) => {
						if (item.stock != 0) {
							item.checked = bool;
						}
					});
				}
			},
			//数量改变
			numberChange(e, index) {
				// 父级组件此处会走两遍,原因是e第一遍是String类型, 第二遍是Number类型, uni-number-box组件内部watch判定两遍的值不相同,因此进行了两次更新
				this.setTimeoutFn && clearTimeout(this.setTimeoutFn);
				this.setTimeoutFn = setTimeout(() => {
					let list = this.cartListArr;
					if (e != list[index].num) {
						if (list[index].stock < e) {
							e = list[index].stock;
						}
						// this.$set(list[index], "num", e);
						this.$emit("update:cart-index", index);
						this.$emit("update:cart-id", list[index].id);
						this.$emit("update:sku-id", list[index].sku_id);
						this.$emit("update:goods-id", list[index].goods_id);
						this.$emit("update:cart-num", e);
						this.$emit("numberChange");
					}
				}, 500);
			},
			/**
			 * @method 移入收藏卡
			 * @param {Number} type 1: 删除, 2: 移入收藏
			 */
			delCart(type) {
				const list = this.cartListArr;
				let ids = [];
				list.forEach((item) => {
					if (item.delChecked) {
						ids.push(item.id);
					}
				});
				if (ids.length == 0)
					return this.$message.info(
						type == 1 ? "请选择要删除的商品" : "请选择要移动的商品"
					);
				this.$util.showModal({
					title: "提示",
					content: type == 1 ? "确认删除吗?" : "确认移入收藏夹吗?",
					success: (res) => {
						if (res.confirm) {
							if (type == 1) {
								this.$emit("update:cart-ids", ids.join(","));
								this.$emit("delCart");
							} else {
								this.$emit("update:cart-ids", ids.join(","));
								this.$emit("transCartGoods");
							}
						}
					},
				});
			},
			// 去结算
			createOrder() {
				const list = this.cartListArr;
				let ids = [];
				let goods_info = []
				list.forEach((item) => {
					if (item.checked) {
						ids.push(item.id);
						goods_info.push({
							goods_id: item.goods_id,
							num: item.num,
							sku_id: item.sku_id,
							cart_id: item.id
						})
					}
				});
				const cart_ids = ids.join(",");
				if (cart_ids == "") return this.$message.info("请选择商品");
				this.$emit("update:cart-ids", ids.join(","));
				this.$emit("createOrder", goods_info);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.shoppingCartSettlement_price2_fd2_0_c0_c0_c1_c2_c0_c1 {
		font-size: 28rpx;
	}
	
	.shoppingCartSettlement_price1_fd2_0_c0_c0_c1_c2_c0_c1 {
		font-size: 32rpx;
	}
	
	.shoppingCartSettlement_fd2_0_c0_c0_c1_c2_c0_c1 {
		color: #F02325;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 37rpx;
	}
	
	.shoppingCartSettlement_fd2_0_c0_c0_c1_c2_c0_c0 {
		font-size: 20rpx;
		font-weight: 500;
		color: #F02325;
		line-height: 37rpx;
	}
	.operate_btn {
		background: #F6F6F6;
		width: 200rpx;
		border-radius: 44rpx !important;
		color: #333;
	}
	
	
	
	.checked_icon {
		color: #999;
	}

	.checked_active {
		color: #3083FF;
	}

	.goods_thumb {
		width: 180rpx;
		height: 180rpx;
		border-radius: 16rpx;
	}

	.cart-page {
		.nologin {
			.nologin-btn {
				width: 280rpx;
				height: 64rpx;
				line-height: 64rpx;
				background: #3083FF;
				border-radius: 36rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}

		.tool-box {
			position: sticky;
			z-index: 999;
			background: #f8f8f8;

			.edit-btn {
				width: 144rpx;
				height: 56rpx;
				line-height: 56rpx;
				border-radius: 56rpx;
				border: 2rpx solid rgba(191, 191, 191, 1);
				background: #fff;

				&.btn-gray {
					width: 200rpx;
					height: 72rpx;
					line-height: 72rpx;
					font-size: 28px;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					background: #f6f6f6;
					border-radius: 44rpx;
				}
			}
		}

		.action-bar {
			position: fixed;
			bottom: var(--window-bottom);
			width: 100%;
			z-index: 0;
		}
	}

	.fu-block-36 {
		width: 36rpx;
		height: 36rpx;
	}

	.fu-block-180 {
		width: 180rpx;
		height: 180rpx;
	}

	.fu-fs28 {
		font-size: 28rpx;
	}

	.fu-fs32 {
		font-size: 32rpx;
	}

	.page-list {
		.goods-info {
			.goods-desc {
				width: 406rpx;
				// flex: 1;
				min-width: 1px;
				min-height: 180rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.sku_name {
					display: flex;
					justify-content: space-between;
					background-color: #f8f8f8;
					height: 48rpx;
					line-height: 48rpx;
					padding: 0 16rpx;
					box-sizing: border-box;
					margin: 8rpx 0;
					border-radius: 8rpx;
				}
			}

			.wrap-image {
				position: relative;

				.box-kong {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					background-color: rgba(0, 0, 0, 0.4);
					z-index: 98;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					width: 148rpx;
					height: 148rpx;

					.box-kong-item {
						width: 96rpx;
						height: 96rpx;
					}
				}
			}
		}
	}
</style>